forum

home / developersection / forums / how to bind products list in knockoutjs with mvc

Ask Question
Anonymous User

Other

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

15-Oct-2015 
How to bind products list in knockoutjs with Mvc


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="/Scripts/jquery-2.1.4.min.js"></script>
  <script src="/Scripts/knockout-3.3.0.js"></script> 
</head>
<body>
<div id="demo">
<table>
    <thead>
        <tr>
            <th>Product Id</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody databind="foreach:Products">
        <tr>
   <td><label data-bind="text:ProductId"></label></td>
      <td><label data-bind="text:ProductName"></label></td>
      <td><label data-bind="text:Price"></label></td>
      <td><p data-bind="text:Description"></p></td>
        </tr>
    </tbody>
</table> 
</div>
<script>
function viewModel() {
    var self = this;
self.Products
= ko.observableArray(); 
    $.getJSON("/Home/Products", function (data) {
        self.Products (data);
    });
 }
$(function () {
    var NewViewModel = new viewModel ();
    ko.applyBindings(NewViewModel,
document.getElementById("demo")); 
});
</script>
</body>
</html>


public class HomeController : Controller
{
 public JsonResult Products ()
 {
  var data = db.Database.SqlQuery<Manufacturers>(@"SELECT DISTINCT ProductId ,
  ProductName,Price,Description FROM products_table").ToList();
  return Json(data, JsonRequestBehavior.AllowGet);
 }
}
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy